<template>
    <div style="width:94%;margin:auto">
        <div style="border-bottom: 1px solid;">
            <h3>个人信息设置</h3>
        </div>
        <div style="width:20%;display:flex;justify-content:space-between;height:200px">
            <div style="border: 1px dashed;margin-top:10px;width:50%;">
                <el-upload class="avatar-uploader" :multipe="false"
                    :file-list="fileList"							
					:on-change="handleChange"
                    :show-file-list="true" :auto-upload="false"						
                    action = "uploadAction"
                    list-type="picture"
                    accept="image/jpg,image/jpeg">
                    <h2 style="margin:0 15px">点击选择头像</h2>
			    </el-upload>
            </div>
            <div style="display:flex;align-items: center;justify-content: center;">
                <el-button type="primary" @click="sub()">上传头像</el-button>
            </div>
        </div>
        <hr>
        <div style="width:25%;display:flex;justify-content:space-between;">
            <el-button type="info">修改密码</el-button>
            <el-input style="margin-right:10px" validate-event 
                onkeyup="value=value.replace(/[^\d\.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"
                placeholder="请输入密码"  v-model="pwd"></el-input>
            <el-button type="primary" @click="updPaw()">确认修改</el-button>
        </div>
        <hr>
        <div style="width:35%;display:flex;justify-content:space-between;">
            <el-button type="info">修改名称和电话</el-button>
            <el-input style="margin-right:10px" 
                        placeholder="请输入名称"  v-model="nickname">
            </el-input>
            <el-input style="margin-right:10px"
                        onkeyup="value=value.replace(/[^\d\.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"
                        placeholder="请输入电话"  v-model="phone">
            </el-input>
            <el-button type="primary" @click="updInfo()">确认修改</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        name:'',
        props:[],
        data() {
            return {
                pwd:'',
                fileList:[],
                nickname:'',
                phone:''
            }
        },
        methods:{
            handleChange(file,filelist){
                console.log(filelist);
                this.fileList = filelist;
            },
            //更头像
            sub(){
                let fd = new FormData();
                let fs = this.fileList;
                if(fs.length>0 && fs[0].raw != null){
                    fd.append("pic",fs[0].raw)
                }
                var that = this
                this.$postFile("/api/fore/user/updateImg",fd)
                .then(function(resp){
                    if(resp.data.data!=null){
                        that.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                    that.$store.commit('$_setImg',resp.data.data);
                })
            },
            //改密码
            updPaw(){
                if(this.pwd=='' || this.pwd==null){
                    this.$message.error("不能为空值")
                    return;
                }
                var that = this
				console.log(that.pwd);
                this.$postX("/api/fore/user/updatePwd",{pwd:that.pwd})
                .then(function(resp){
					console.log(resp);
                    if(resp.data.data!=0){
                        that.$message({
                            message: '修改成功,请重新登录',
                            type: 'success'
                        });
						that.$store.commit('$_removeStorage');
						that.$router.push({path : "/"})
                    }
                })
                
            },
            updInfo(){
                if(this.nickname=='' && this.phone==''){
                    this.$message.error("不能两个都为空值")
                    return;
                }
                var that = this
                this.$postX("/api/fore/user/updateInfo",{nickname:that.nickname,phone:that.phone})
                .then(function(resp){
                    if(resp.data.data!=0){
                        that.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        that.$store.commit('$_setNickname',that.nickname);
                        this.nickname = ''
                        this.phone = ''
                        return;
                    }
                    console.log("修改失败");
                })
            }
        },
        mounted(){
            
        }
    }
</script>
<style scoped="scoped">

</style>
